<script setup lang="ts">
import { ref, reactive } from "vue";
import { formatMsgTime } from "@/utils/utils";
import { useHomeStore } from "@/stores/home/home";
import api from "@/api/song/index";
import { ElMessage } from "element-plus";

const homeStore = useHomeStore();
const commentsApi: any = api;

const props = defineProps({
  sId: {
    type: [Number, String],
    default: 0,
  },
  type: {
    type: Number,
    default: 0,
  },
});

const info: any = reactive({
  msg: "",
  maxLen: 140,
  curId: props.sId,
  limit: 20,
  offset: 0,
  before: 0,
  hotComments: [],
  comments: [],
  total: 0,
  currentPage: 0,
  isEmpty: false,
  replyCommentId: 0,
  replyIndex: -1,
});

const userInfo: any = computed(() => homeStore.userInfo);
const isLogin = computed(() => homeStore.isLogin);
const isShowReply = computed(() => {
  return function (item: any, index: number) {
    return item.commentId === info.replyCommentId && info.replyIndex === index;
  };
});

// 获取页面评论
const getComment = () => {
  // 0: 歌曲 1: mv 2: 歌单 3: 专辑  4: 电台 5: 视频 6: 动态
  switch (props.type) {
    case 0:
      getCommentList("commentSong");
      break;
    case 1:
      getCommentList("commentMv");
      break;
    case 3:
      getCommentList("albumComment");
      break;
    case 5:
      getCommentList("commentVideo");
      break;
  }
};
getComment();

function getCommentList(type: any) {
  commentsApi[type]({
    id: info.curId,
    limit: info.limit,
    offset: info.offset,
    before: info.before,
    timestamp: new Date().valueOf(),
  }).then((res: any) => {
    msgHandler(res);
  });
}

const msgHandler = (res: any) => {
  if (res.code !== 200) {
    return ElMessage.error("数据请求失败");
  }
  info.total = res.total;
  info.hotComments = res.hotComments || [];
  info.hotComments.map((item: any) => {
    item.isHot = true;
    return item;
  });
  info.comments = [...info.hotComments, ...res.comments];
  // 当前评论是否为空
  info.isEmpty = info.before === 0 && !info.comments.length;
};
</script>

<template>
  <div class="comments">
    <div class="comment_hd">
      <h3>
        评论
        <em>共{{ info.total }}条评论</em>
      </h3>
      <div class="userInfo" v-if="userInfo">
        <span>{{ userInfo.nickname }}</span>
        <el-image :src="userInfo.avatarUrl" class="avatar">
          <div slot="placeholder" class="image-slot">
            <i class="iconfont icon-placeholder"></i>
          </div>
        </el-image>
      </div>
    </div>
    <el-form class="comment_box">
      <div class="comment_textarea">
        <div class="pre">{{ info.msg }}</div>
        <textarea
          class="J_inpBox inp-paragraph"
          name="leave_msg"
          id="leave_msg"
          placeholder="期待你的神评论……"
          v-model="info.msg"
        ></textarea>
      </div>
      <div class="comment_box_footer">
        <el-button type="primary" @click="info.subComment">评论</el-button>
        <span class="comment_limit"
          ><em class="num">{{ info.msg.length }}</em
          >/{{ info.maxLen }}</span
        >
      </div>
    </el-form>
    <div class="comment_area">
      <template v-if="info.comments.length">
        <div
          class="comment_item"
          v-for="(item, index) in info.comments"
          :key="item.commentId + index + ''"
        >
          <router-link
            :to="{ path: '/user', query: { id: item.user.userId } }"
            class="comment_avatar"
          >
            <el-image :src="item.user.avatarUrl + '?param=120y120'" lazy>
              <div slot="placeholder" class="image-slot">
                <i class="iconfont icon-placeholder"></i>
              </div>
            </el-image>
          </router-link>
          <div class="comment_info">
            <router-link
              :to="{ path: '/user', query: { id: item.user.userId } }"
              >{{ item.user.nickname }}</router-link
            >
            <div class="comment_content">
              {{ item.content }}
            </div>
            <div
              class="comment_reply"
              v-for="replyItem in item.beReplied"
              :key="replyItem.beRepliedCommentId"
            >
              <router-link
                :to="{ path: '/user', query: { id: replyItem.user.userId } }"
                >{{ replyItem.user.nickname }}</router-link
              >: {{ replyItem.content }}
            </div>
            <div class="comment_footer">
              <div class="comment_time">
                {{ formatMsgTime(item.time) }}
              </div>
              <div class="comment_oper">
                <!-- @click="delComment(item)" -->
                <em
                  class="comment_del"
                  v-if="userInfo && userInfo.userId === item.user.userId"
                  ><i class="iconfont icon-del"></i
                ></em>
                <!-- @click="likeComment(item)" -->
                <span :class="[item.liked ? 'active' : '']">
                  <i class="iconfont icon-yinle1"></i>
                  <span>
                    {{ item.likedCount }}
                  </span>
                </span>
                <!-- @click="replyComment(item, index)" -->
                <span class="replyComment">
                  <i class="iconfont icon-liaotian"></i>
                </span>
              </div>
            </div>
            <div class="isHot" v-if="item.isHot">
              <i class="iconfont icon-choicest"></i>
            </div>
            <transition name="fade" mode="out-in">
              <Reply
                :params="item"
                v-if="isShowReply(item, index)"
                @replyMsg="info.replyMsg"
              ></Reply>
            </transition>
          </div>
        </div>
        <!-- @current-change="currentChange" -->
        <div class="pagination">
          <el-pagination layout="prev, pager, next" :total="info.total">
          </el-pagination>
        </div>
      </template>
      <div v-else class="comments_status">
        <div class="loading" v-if="!info.isEmpty">评论加载中...</div>
        <div class="empty" v-else>
          <p><i class="iconfont icon-empty-main"></i></p>
          <p>暂无留言</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment_hd {
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 0;

  h3 {
    flex: 1;
    font-size: 24px;
    line-height: 24px;
    color: var(--el-text-color-primary);
    em {
      font-weight: normal;
      padding-left: 10px;
      font-size: var(--el-font-size-base);
      line-height: 14px;
      font-style: normal;
      color: var(--el-text-color-regular);
    }
  }

  .userInfo {
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      vertical-align: top;
    }

    span {
      display: inline-block;
      padding: 0 20px;
      line-height: 30px;
      font-size: 14px;
      color: var(--el-color-info-light-3);
    }
  }
}

.comment_box {
  .comment_textarea {
    position: relative;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-bg-color);
    .J_inpBox {
      color: var(--el-text-color-primary);
      border: none;
      outline: none;
      display: flex;
      justify-content: center;
      background-color: var(--el-bg-color);
      width: 100%;
    }
  }

  .pre {
    visibility: hidden;
  }

  .inp-paragraph {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 20px);
    resize: none;
    width: auto;
    padding: 0;
    border: 0;
    margin: 0;
    font-family: inherit;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .inp-paragraph,
  .pre {
    width: calc(100% - 30px);
    padding: 10px 15px;
    line-height: 24px;
    min-height: 90px;
    font-size: 14px;
    color: var(--el-color-info-light-3);
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .comment_box_footer {
    display: flex;
    padding: 15px 0 30px;
    justify-content: space-between;
  }

  .comment_limit {
    display: inline-block;
    line-height: 28px;
    padding: 0 0 0 20px;
    font-size: 14px;
    color: var(--el-color-info-light-3);

    em {
      font-style: normal;
    }
  }
}

.comments_status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;

  .loading {
    font-size: 14px;
    line-height: 24px;
    color: var(--el-color-info-light-5);
  }

  .empty {
    text-align: center;

    p {
      font-size: 14px;
      line-height: 24px;
      color: var(--el-color-info-light-5);
    }

    .icon-empty-main {
      line-height: 140px;
      font-size: 100px;
      color: var(--el-color-info-light-5);

      opacity: 0.8;
    }
  }
}

.comment_item {
  position: relative;
  display: flex;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
  border-radius: 6px;
  background: var(--el-bg-color);

  .comment_avatar {
    display: in;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
  }

  .comment_info {
    flex: 1;
    padding-left: 20px;
    font-size: var(--el-font-size-base);
    a {
      display: inline-block;
      padding-bottom: 10px;
      line-height: 14px;
      color: var(--el-text-color-primary);

      &:hover {
        color: var(--color-text);
      }
    }
  }

  .comment_content {
    line-height: 24px;
    font-size: var(--el-font-size-base);
  }

  .comment_reply {
    padding: 10px;
    line-height: 28px;
    margin: 5px 0;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-page);
    border-radius: 6px;
    box-shadow: 0 0px 27px rgb(0 0 0 / 6%) inset;

    a {
      color: var(--el-text-color-regular);
      font-size: var(--el-font-size-base);
      display: inline-block;
      line-height: 28px;
      padding: 0;
    }
  }

  .comment_footer {
    display: flex;
    color: #999;

    .comment_time {
      display: inline-block;
      line-height: 28px;
    }

    .comment_oper {
      flex: 1;
      text-align: right;
      .iconfont {
        font-size: 20px;
      }
      span {
        display: inline-block;
        line-height: 28px;
        cursor: pointer;

        &.active,
        &.active .iconfont {
          color: var(--el-text-color-primary);
        }
        span {
          margin: 0px 15px 0px 3px;

          font-size: var(--el-font-size-small);
        }
      }
    }
  }

  .isHot {
    position: absolute;
    right: 0;
    top: -8px;
    z-index: 1;
    // transform: rotate(45deg);

    .icon-choicest {
      font-size: 60px;
      color: var(--color-text);
      opacity: 0.8;
    }
  }

  .comment_del {
    cursor: pointer;
    display: none;
  }

  &:hover {
    .comment_del {
      display: inline-block;
    }
  }

  &:last-child {
    border: none;
  }
}

.pagination {
  padding: 30px 0;
  text-align: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
